import { Card } from 'antd';
import { FormattedMessage } from 'umi';
import React from 'react';
import { VisitDataType } from '../data.d';
import { Pie } from './Charts';
import styles from '../style.less';
/**
 * 素材资源统计
 * @param param0 
 */
const MaterialResourceStatistics = ({
  loading,
  salesPieData,
}: {
  loading: boolean;
  salesPieData: VisitDataType[];
}) => (
  <Card
    loading={loading}
    className={styles.salesCard}
    bordered={false}
    title={
      <FormattedMessage
        id="dashboardanddashboardanalysis.analysis.material-resource-statistics"
        defaultMessage="The Statistics of Material Resources"
      />
    }
    style={{
      height: '100%',
    }}
  >
    <div>
      <Pie
        hasLegend
        subTitle={
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.materials"
            defaultMessage="Materials"
          />
        }
        total={() =>
          <>
          {salesPieData.reduce((pre, now) => now.y + pre, 0)}
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.material"
            defaultMessage="个"
          />
          </>
        }
        data={salesPieData}
        valueFormat={(value) => 
          <>
          {value}
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.material"
            defaultMessage="个"
          />
          </>
        }
        height={248}
        lineWidth={4}
      />
    </div>
  </Card>
);

export default MaterialResourceStatistics;
